<script setup>
import { reactive, ref, watch } from 'vue'
import useLoginStore from '@/store/user/index.js'
import router from '@/router/index.js'

//接收数据
const personInfoProps = defineProps({
  personBaseInfo: {
    type: Object,
    default: () => ({})
  }
})

const loginStore = useLoginStore()

//获取基本信息，修改信息表单
const baseInfoRef = ref()
const updatePasswordRef = ref()

//激活的tab标签
const activeName = ref('first')

//基本信息
const baseInfo = reactive({
  nickName: '',
  phonenumber: '',
  email: '',
  sex: ''
})

//修改密码
const updatePassword = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})
//校验表单
const rules = ref({
  nickName: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
  phonenumber: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
  newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
  confirmPassword: [{ required: true, message: '请输入确认密码', trigger: 'blur' }]
})

//修改基本信息
const baseInfoBtn = async () => {
  //校验表单
  await baseInfoRef.value.validate()
  await loginStore.editUserInfoAction(baseInfo)
}

//密码修改
const updatePasswordBtn = async () => {
  await updatePasswordRef.value.validate()
  if (updatePassword.newPassword !== updatePassword.confirmPassword) {
    ElMessage.error('新旧密码不一致')
    return
  }
  await loginStore.editUserPasswordAction(updatePassword.oldPassword, updatePassword.newPassword)
}

//关闭当前个人信息页面,返回上一个路径页面
const closeBtn = () => {
  router.back()
}
watch(personInfoProps, () => {
  if (personInfoProps.personBaseInfo) {
    //显示基本信息
    Object.assign(baseInfo, {
      nickName: personInfoProps?.personBaseInfo.nickName,
      phonenumber: personInfoProps?.personBaseInfo.phonenumber,
      email: personInfoProps?.personBaseInfo.email,
      sex: personInfoProps?.personBaseInfo.sex
    })
  }
})
</script>

<template>
  <div class="base-info">
    <el-card style="width: 100%">
      <div class="header">基本资料</div>
      <!--    基本信息-->
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基本资料" name="first">
          <el-form ref="baseInfoRef" :rules="rules" :model="baseInfo">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="baseInfo.nickName" placeholder="请输入用户昵称" />
            </el-form-item>
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="baseInfo.phonenumber" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="邮箱" label-width="68px" prop="email">
              <el-input v-model="baseInfo.email" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="性别" label-width="68px">
              <el-radio-group v-model="baseInfo.sex" class="ml-4">
                <el-radio value="0" size="large">男</el-radio>
                <el-radio value="1" size="large">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="性别" label-width="68px">
              <el-button type="primary" @click="baseInfoBtn">保存</el-button>
              <el-button type="danger" @click="closeBtn">关闭</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!--        修改密码-->
        <el-tab-pane label="修改密码" name="second">
          <el-form ref="updatePasswordRef" :rules="rules" :model="updatePassword">
            <el-form-item type="password" label="旧密码" label-width="68px" prop="oldPassword">
              <el-input
                show-password
                type="password"
                v-model="updatePassword.oldPassword"
                placeholder="请输入旧密码"
              />
            </el-form-item>
            <el-form-item label="新密码" label-width="68px" prop="newPassword">
              <el-input
                show-password
                type="password"
                v-model="updatePassword.newPassword"
                placeholder="请输入新密码"
              />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                show-password
                type="password"
                v-model="updatePassword.confirmPassword"
                placeholder="请确认密码"
              />
            </el-form-item>
            <el-form-item label="性别" label-width="68px">
              <el-button type="primary" @click="updatePasswordBtn">保存</el-button>
              <el-button type="danger" @click="closeBtn">关闭</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<style scoped lang="less">
.base-info {
  .header {
    padding-bottom: 10px;
    border-bottom: 1px solid #e7eaec;
  }
}
</style>
